<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<body>
		
		<div id="app">
			{{hello}}
			<h3  v-text="hello"></h3>
			
			<div v-html="html"></div>
			
			
			<div  v-pre>{{我现在是原始的数据}}</div>
			
			<div  v-text="one"  v-once ></div>
			
			<!--v-model命令,双向数据的绑定-->
		    <div>
			<input  type="text"  v-model="name"  name="username"/><span  v-text="name"></span>
			</div>
			
			
			
			<div>{{num}}</div>
			<!--直接调用对象-->
			<button v-on:click="num++" >增加</button>
			<button v-on:click="num--">减少</button>
			<!--调用函数-->
			<button v-on:click="addNum()" >增加</button>
			<button v-on:click="delNum()">减少</button>
			
			
			<div>{{numm}}</div>
			<!--直接调用对象-->
			<button @click="addNumm()">增加</button>
			<button @click="delNumm()">减少</button>
			<!--调用函数-->
			<button @click="numm++">增加</button>
			<button @click="numm--">减少</button>
			
			<div>
				<input name="username" type="text" @keyup.enter="enter()" value="回车触发"/>
				<input name="username" type="text" @keyup.space="handler" value="空格触发"/>
				<input name="username" type="text" @keyup.delete="handler" value="删除键触发"/>
				<input name="username" type="text" @keyup.left="handler"   value="<-触发"/>
				<input name="username" type="text" @keyup.right="handler" value="->键触发"/>
			</div>
			
			
		</div>
		
		<script  src="../js/vue.js"></script>
		
		
		<script>
			
			const  app=new  Vue({
				el: "#app",
				data: {
					hello :"hello 后台修改数据",
					html :"<h1>好好学习,天天向上</h1>",
					one : "现在再次进行修改",
					name: "admin",
					num : 1,
					numm: 0
				},
				methods: {
					addNum(){
						this.num++;
					},
					delNum(){
						this.num--;
					},
					addNumm(){
						this.numm++;
					},
					delNumm(){
						this.numm--;
					},
					enter(){
						alert("请输入");
					}
				}
			})
		
		</script>
	</body>
</html>
